<template>
  <div class="nested-table-container">
    <el-table :data="groupData" style="width: 100%" size="small" row-key="groupName" border ref="tableRef"
      :expand-row-keys="expandedRowKeys" @expand-change="handleExpandChange">
      <!-- 分组列 -->
      <el-table-column label="全部客群" width="220">
        <template #default="{ row }">
          <div class="group-header" @click="toggleExpand(row)">
            <el-icon :size="14" class="expand-icon">
              <component :is="isExpanded(row) ? 'Minus' : 'Plus'" />
            </el-icon>
            <span class="group-name" :title="row.groupName">{{ row.groupName }}</span>
            <el-tag v-if="row.details?.length" size="small" class="detail-count">
              {{ row.details.length }}
            </el-tag>
          </div>
        </template>
      </el-table-column>

      <!-- 汇总信息列 - 分组行显示为空 -->
      <el-table-column label="人数" width="100" align="center">
        <template #default="{ row }">
          <!-- 分组行显示为空 -->
        </template>
      </el-table-column>

      <el-table-column label="最新计算日期" width="180" align="center">
        <template #default="{ row }">
          <!-- 分组行显示为空 -->
        </template>
      </el-table-column>

      <el-table-column label="创建方式" width="120" align="center">
        <template #default="{ row }">
          <!-- 分组行显示为空 -->
        </template>
      </el-table-column>

      <el-table-column label="更新方式" width="120" align="center">
        <template #default="{ row }">
          <!-- 分组行显示为空 -->
        </template>
      </el-table-column>

      <el-table-column label="客群状态" width="100" align="center">
        <template #default="{ row }">
          <!-- 分组行显示为空 -->
        </template>
      </el-table-column>

      <el-table-column label="创建人" width="100" align="center">
        <template #default="{ row }">
          <!-- 分组行显示为空 -->
        </template>
      </el-table-column>

      <el-table-column label="操作" width="140" align="center">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click.stop="edit(row)">编辑</el-button>
          <el-button link type="danger" size="small" @click.stop="del(row)">删除</el-button>
        </template>
      </el-table-column>

      <!-- 展开行 - 明细表格 -->
      <el-table-column type="expand" width="0" class="hidden-expand-column">
        <template #default="{ row }">
          <div class="detail-table-wrapper">
            <el-table :data="row.details" border size="small" class="detail-table" :row-class-name="() => 'detail-row'"
              :show-header="false" style="width: 100%">
              <!-- 全部客群列 -->
              <el-table-column width="220">
                <template #default="{ row: detailRow }">
                  <span class="detail-group-name" :title="detailRow.groupName">
                    {{ detailRow.groupName }}
                  </span>
                </template>
              </el-table-column>

              <!-- 人数列 -->
              <el-table-column width="100" align="center">
                <template #default="{ row: detailRow }">
                  <span class="text-ellipsis">{{ detailRow.count }}</span>
                </template>
              </el-table-column>

              <!-- 最新计算日期列 -->
              <el-table-column width="180" align="center">
                <template #default="{ row: detailRow }">
                  <span class="text-ellipsis" :title="formatDate(detailRow.latestDate)">
                    {{ formatDate(detailRow.latestDate) }}
                  </span>
                </template>
              </el-table-column>

              <!-- 创建方式列 -->
              <el-table-column width="120" align="center">
                <template #default="{ row: detailRow }">
                  <el-tag :type="detailRow.createMethod === '手动创建' ? '' : 'success'" size="small" class="text-ellipsis">
                    {{ detailRow.createMethod }}
                  </el-tag>
                </template>
              </el-table-column>

              <!-- 更新方式列 -->
              <el-table-column width="120" align="center">
                <template #default="{ row: detailRow }">
                  <el-tag :type="detailRow.updateMethod === '手动更新' ? '' : 'success'" size="small" class="text-ellipsis">
                    {{ detailRow.updateMethod }}
                  </el-tag>
                </template>
              </el-table-column>

              <!-- 客群状态列 -->
              <el-table-column width="100" align="center">
                <template #default="{ row: detailRow }">
                  <el-tag :type="detailRow.status === '正常' ? 'success' : 'danger'" size="small" class="text-ellipsis">
                    {{ detailRow.status }}
                  </el-tag>
                </template>
              </el-table-column>

              <!-- 创建人列 -->
              <el-table-column width="100" align="center">
                <template #default="{ row: detailRow }">
                  <span class="text-ellipsis" :title="detailRow.creator">
                    {{ detailRow.creator }}
                  </span>
                </template>
              </el-table-column>

              <!-- 操作列 -->
              <el-table-column width="140" align="center">
                <template #default="{ row: detailRow }">
                  <div class="action-buttons">
                    <el-button link type="primary" size="small" @click.stop="edit(detailRow)">编辑</el-button>
                    <el-button link type="danger" size="small" @click.stop="del(detailRow)">删除</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import {
  ElTable,
  ElTableColumn,
  ElButton,
  ElTag,
  ElIcon,
  ElMessageBox
} from 'element-plus'
import { Plus, Minus } from '@element-plus/icons-vue'

const tableRef = ref(null)
const expandedRowKeys = ref([])

const groupData = ref([
  {
    groupName: '用户客群',
    totalCount: 100,
    latestDate: '2020-08-20 20:20:20',
    createMethod: '手动创建',
    updateMethod: '手动更新',
    status: '正常',
    creator: '张三',
    details: [
      {
        groupName: '客群1-这是一个非常长的客群名称可能会超出显示范围需要显示省略号',
        count: 100,
        latestDate: '2020-08-20 20:20:20',
        createMethod: '手动创建',
        updateMethod: '手动更新',
        status: '正常',
        creator: '张三这是一个很长的创建人名称',
      },
      {
        groupName: '客群2',
        count: 50,
        latestDate: '2020-08-21 10:10:10',
        createMethod: '自动创建',
        updateMethod: '自动更新',
        status: '异常',
        creator: '李四',
      },
    ],
  },
  {
    groupName: '对私客户客群',
    totalCount: 80,
    latestDate: '2020-08-22 15:15:15',
    createMethod: '自动创建',
    updateMethod: '自动更新',
    status: '正常',
    creator: '王五',
    details: [
      {
        groupName: '客群A',
        count: 80,
        latestDate: '2020-08-22 15:15:15',
        createMethod: '自动创建',
        updateMethod: '自动更新',
        status: '正常',
        creator: '王五',
      },
    ],
  },
  {
    groupName: '认证企业客群',
    totalCount: 60,
    latestDate: '2020-08-23 18:18:18',
    createMethod: '手动创建',
    updateMethod: '自动更新',
    status: '正常',
    creator: '赵六',
    details: [
      {
        groupName: '客群X',
        count: 60,
        latestDate: '2020-08-23 18:18:18',
        createMethod: '手动创建',
        updateMethod: '自动更新',
        status: '正常',
        creator: '赵六',
      },
    ],
  },
])

/**
 * 格式化日期显示
 */
function formatDate(dateString) {
  if (!dateString) return '-'
  return dateString.replace(' ', '\n')
}

/**
 * 判断某行是否展开
 */
function isExpanded(row) {
  return expandedRowKeys.value.includes(row.groupName)
}

/**
 * 切换展开状态
 */
function toggleExpand(row) {
  if (!row.details || row.details.length === 0) return

  const index = expandedRowKeys.value.indexOf(row.groupName)
  if (index > -1) {
    expandedRowKeys.value.splice(index, 1)
  } else {
    expandedRowKeys.value.push(row.groupName)
  }
}

/**
 * 处理展开变化事件
 */
function handleExpandChange(row, expandedRows) {
  expandedRowKeys.value = expandedRows.map(item => item.groupName)
}

/**
 * 编辑操作
 */
function edit(row) {
  console.log('编辑:', row.groupName)
}

/**
 * 删除操作（带确认提示）
 */
function del(row) {
  ElMessageBox.confirm(
    `确定要删除"${row.groupName}"吗？此操作不可恢复。`,
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    console.log('删除:', row.groupName)
  }).catch(() => { })
}
</script>

<style scoped>
.nested-table-container {
  width: 100%;
  padding: 16px;
  background: #fff;
  border-radius: 4px;
  box-sizing: border-box;
}

.group-header {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  min-height: 32px;
}

.expand-icon {
  margin-right: 8px;
  color: #409EFF;
  flex-shrink: 0;
}

.group-name {
  font-weight: 600;
  margin-right: 8px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-count {
  flex-shrink: 0;
}

.detail-table-wrapper {
  margin: -12px -12px -12px 0;
  background: #fafafa;
}

.detail-table {
  width: 100%;
}

/* 文字超出显示省略号 */
.text-ellipsis {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.detail-group-name {
  color: #666;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* 隐藏展开符号栏，改为宽度0避免影响列宽 */
:deep(.hidden-expand-column) {
  width: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}

:deep(.hidden-expand-column .cell) {
  padding: 0 !important;
  display: none !important;
}

/* 确保列宽对齐 */
:deep(.el-table__header-wrapper .el-table__header th),
:deep(.detail-table .el-table__body td) {
  box-sizing: border-box;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .nested-table-container {
    overflow-x: auto;
  }

  :deep(.el-table) {
    min-width: 900px;
  }
}

/* 美化表格样式 */
:deep(.el-table th) {
  background-color: #f5f7fa;
  font-weight: 600;
}

:deep(.el-table .el-table__expanded-cell) {
  padding: 0 !important;
  background-color: #fafafa;
}

/* 确保分组行和明细行对齐 */
:deep(.el-table__body-wrapper) {
  position: relative;
}

:deep(.detail-table .el-table__row) {
  background: transparent;
}

/* 表格单元格样式优化 */
:deep(.el-table .cell) {
  padding: 8px 12px;
  line-height: 1.5;
}

:deep(.detail-table .el-table .cell) {
  padding: 4px 8px;
}

/* 标签样式优化 */
:deep(.el-tag) {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
</style>
